<template>
  <div id="app">

    <el-menu class="el-menu-demo"
             mode="horizontal"
             default-active="1">
      <el-menu-item index="1"
                    @click="change(0)">购买物品</el-menu-item>
      <el-menu-item index="2"
                    @click="change(1)">我出售的物品</el-menu-item>
      <el-menu-item index="3"
                    @click="change(2)">上架新物品</el-menu-item>

    </el-menu>


    <component v-bind:is="
                 currentComponent"
               @component="change">
    </component>

  </div>
</template>

<script>
import BuyPage from './transaction/BuyPage'
import MySellGoods from './transaction/MySellGoods'
import NewSellGoods from './transaction/NewSellGoods'


export default {
  name: 'UserTransaction',
  components: {
    BuyPage,
    MySellGoods,
    NewSellGoods
  },
  data () {
    return {
      currentComponent: 'BuyPage',
    }
  },
  methods: {
    change (code) {
      if (code == 0) {
        this.currentComponent = 'BuyPage';
      }
      else if (code == 1) {
        //注册组件
        this.currentComponent = 'MySellGoods';
      }
      else if (code == 2) {
        //登录组件
        this.currentComponent = 'NewSellGoods';
      }
    }
  }
}
</script>

<style scoped>
el-menu {
  margin: auto auto 20px;
}
el-menu-item {
  margin: auto auto 20px;
}
</style>
